{extend name="common/base"/}
<!-- 主体 -->
{block name="body"}
<form class="layui-form body-content">
	<table class="layui-table layui-table-form">
		<tr>
			<td class="layui-td-gray2">角色名称<font>*</font>
			</td>
			<td>
				<input type="hidden" name="id" value="{$id}" />
			<input class="layui-input" type="text" name="title" lay-verify="required" lay-reqText="请输入角色名称" {notempty name="$role.title"
				}value="{$role.title}" {/notempty} placeholder="请输入角色名称" autocomplete="off" />
			</td>
			<td class="layui-td-gray2">状态<font>*</font>
			</td>
			<td>
				{if condition="$id eq 0"}
			<input type="radio" name="status" value="1" title="正常" checked>
			<input type="radio" name="status" value="-1" title="禁用">
			{else/}
			<input type="radio" name="status" value="1" title="正常" {eq name="$role.status" value="1" }checked{/eq}>
			<input type="radio" name="status" value="-1" title="禁用" {eq name="$role.status" value="-1" }checked{/eq}>
			{/if}
			</td>
		</tr>
		<tr>
			<td class="layui-td-gray2" style="vertical-align: top;">菜单显示配置<font>*</font>
			</td>
			<td style="vertical-align: top;">
				<div class="layui-input-inline" style="min-width: 400px; min-height: 200px;">
					<div id="tabMenu"></div>
				</div>
			</td>
			<td class="layui-td-gray2"  style="vertical-align: top;">操作权限配置<font>*</font>
			</td>
			<td style="vertical-align: top;">
			
				<div class="layui-input-inline" style="min-width: 400px;min-height: 200px;">
					<div id="tabTree"></div>
				</div>
			</td>
		</tr>
		<tr>
			<td class="layui-td-gray2" style="vertical-align: top;">备注内容
			</td>
			<td colspan="3">
				<textarea name="desc" placeholder="请输入备注"
				class="layui-textarea">{notempty name="$role.desc" } {$role.desc} {/notempty}</textarea>
			</td>
		</tr>
	</table>
	<div style="padding: 10px 0">
		<button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform">立即提交</button>
		<button type="reset" class="layui-btn layui-btn-primary">重置</button>
		<button lay-event="back" class="layui-btn layui-btn-primary">返回</button>
	</div>
</form>
{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<script>
	// 获取选中节点的id
	function getChecked_list(data) {
		var id = "";
		$.each(data, function (index, item) {
			if (id != "") {
				id = id + "," + item.id;
			}
			else {
				id = item.id;
			}
			if (item.children) {
				var i = getChecked_list(item.children);
				if (i != "") {
					id = id + "," + i;
				}
			}

		});
		return id;
	}
	function init(layui) {
		var tree = layui.tree;
		var form = layui.form;
		var layer = layui.layer;;

		// 初始化
		$.ajax({
			url: '/admin/api/get_rule?id={$id}',
			async: false,
			dataType: 'json',
			success: function (data) {
				tree.render({
					elem: '#tabTree'
					, data: data.data
					, checkChild: false
					, showCheckbox: true  //是否显示复选框
					, id: 'demoId1'
				});
			}
		});

		// 初始化
		$.ajax({
			url: '/admin/api/get_menu?id={$id}',
			async: false,
			dataType: 'json',
			success: function (data) {
				tree.render({
					elem: '#tabMenu'
					, data: data.data
					, checkChild: false
					, showCheckbox: true  //是否显示复选框
					, id: 'demoId2'
				});
			}
		});



		//监听提交
		form.on('submit(webform)', function (obj) {
			var checkRule = tree.getChecked('demoId1');
			var checkMenu = tree.getChecked('demoId2');

			var rules = getChecked_list(checkRule);
			var menus = getChecked_list(checkMenu);
			obj.field['rules'] = rules;
			obj.field['menus'] = menus;
			$.ajax({
				url: '/admin/role/post_submit',
				data: obj.field,
				type: 'post',
				success: function (res) {
					if (res.code == 1) {
						layer.confirm('保存成功,返回列表页吗?', { icon: 3, title: '提示' }, function (index) {
							history.back(-1);
							layer.close(index);
						});
					} else {
						layer.msg(res.msg);
					}
				}
			});
			return false;
		});
		//监听返回
		$('.body-content').on('click', '[lay-event="back"]', function () {
			history.back(-1);
			return false;
		});

	}

</script>
{include file="common/layui" base='base' extend="[]" use="['tree', 'form', 'layer']" callback="init" /}
{/block}
<!-- /脚本 -->